<template>
  <section class="service-platform-page" :class="{bg:imgBg}" :style="`background-color:${bgolor};margin-top:${top};padding-left:${spacing};padding-right:${spacing};margin-bottom:${bottom} `">
    <section
      class="page-top-bg"
      v-if="imgBg"
      :style="
        `background-image: url(${imgBg}); `
      "
    />
    <ul
      class="platform-page-list"
    >
<!--      :style="{-->
<!--      padding: '0 ' + px2rem(option.spacing),-->
<!--      top: px2rem(192 + option.top)-->
<!--      }"-->
      <!-- <empty-page
        v-if="!configInfo.data || configInfo.data.length === 0"
        :empty-type="0"
      /> -->
      <li
        v-for="(item, i) in configInfo.data"
        :key="i"
        class="list-item"
        :class="[!item.desc && 'desc-empty']"
        @click="goOtherSys(item.url)"
      >
        <img class="bg-img" :src="item.bgImg" alt="" />
        <div class="text">{{ item.title }}</div>
        <section class="go-btn">进入系统</section>
        <ul v-if="item.desc" class="desc-wrap">
          <li v-for="ite in item.desc" :key="ite.name">
            <img :src="require(`./images/${ite.icon}.png`)" alt="" />
            <span class="etc">{{ ite.name }}</span>
          </li>
        </ul>
      </li>
    </ul>
  </section>
</template>

<script>
import mixins from './../mixins'

export default {
  name: 'servicePlatformList',
  components: {},
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      configInfo: {},
      defaultData: {
        id: 'two',
        moduleName: '工匠书坊',
        more: '/goOtherSyS?t=book&cn=工匠书坊',
        data: [
          {
            title: '《从工人到工匠——成为大国工匠的自我重塑之路》',
            url:
              'https://open.dzzgsw.com/weixin/book/048a390f40e747c0ad78d66a90f1ae79.html',
            bgImg:
              'https://jnqg-prod.oss-cn-beijing.aliyuncs.com/2e87a99e-bf00-4418-95c3-87ab99e8173d/22/04/07/2204074d063a8804d642c8b8132426cf65a0d2.png',
            desc: [
              {
                icon: 'glpt',
                name: '按时付款摩拉克斯能否'
              }
            ]
          },
          {
            title: '《从工人到工匠——成为大国工匠的自我重塑之路》',
            url:
              'https://open.dzzgsw.com/weixin/book/048a390f40e747c0ad78d66a90f1ae79.html',
            bgImg:
              'https://jnqg-prod.oss-cn-beijing.aliyuncs.com/2e87a99e-bf00-4418-95c3-87ab99e8173d/22/04/07/2204074d063a8804d642c8b8132426cf65a0d2.png',
            desc: [
              {
                icon: 'psgl',
                name: '撒，就'
              },
              {
                icon: 'pspt',
                name: '斯柯达加班费'
              }
            ]
          }
        ]
      }
    }
  },
  computed: {
    imgBg() {
      return this.option.imgBg
    },
    bgolor() {
      return this.option.bgolor
    },
    bottom() {
      return this.px2rem(this.option.bottom || 0)
    }
  },
  async created() {
    console.log(this.option)

    if (this.isInitData) {
      await this.initData()
    } else {
      this.configInfo = this.defaultData
    }
    // try {
    //   const otherSysConfig = getConfigVal('APP_HOME_OUTSIDE_LINK')
    //     ? JSON.parse(getConfigVal('APP_HOME_OUTSIDE_LINK'))
    //     : []
    //   const obj = otherSysConfig.find((item) => item.id === 'one')
    //   if (Object.keys(obj).length) {
    //     this.configInfo = obj
    //     console.log(obj)
    //   } else {
    //     this.configInfo = {}
    //   }
    // } catch (err) {
    //   this.configInfo = {}
    // }
  },
  methods: {
    setData(result) {
      const { data } = result.dataList || {}
      console.log(JSON.parse(data.configValue))
      const obj =
        JSON.parse(data.configValue).find((item) => item.id === 'one') || {}
      console.log(obj)
      if (Object.keys(obj).length !== 0) {
        this.configInfo = obj
        console.log(obj)
      } else {
        this.configInfo = this.defaultData
      }
    },
    goOtherSys(url) {
      if (url) {
        location.href = url
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.service-platform-page {
  //height: 100vh;
  //height: auto;
  width: 100%;
  position: relative;
  padding-bottom: rem(20);

  &.bg{
    padding-top: rem(192);
  }
  .page-top-bg {
    background-image: url('./images/top-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: rem(343);
  }

  .platform-page-list {
    //position: absolute;
    //top: rem(192);
    //bottom: rem(20);
    //left: 0;
    //right: 0;
    z-index: 1;
    overflow: auto;
    padding: 0 rem(24);
    .list-item {
      margin-top: rem(35);
      min-height: rem(242);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      border-radius: rem(16);
      padding: rem(30) rem(24) 0;
      position: relative;
      color: #fff;
      &:first-child {
        margin-top: 0;
      }
      &.desc-empty {
        height: rem(210);
        padding-bottom: rem(48);
      }
      .bg-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        //z-index: 1;
      }
      .text {
        font-size: rem(32);
        font-weight: bold;
        z-index: 1;
      }
      .go-btn {
        z-index: 1;
        margin: rem(20) 0;
        width: rem(152);
        height: rem(54);
        border-radius: rem(54);
        font-size: rem(24);
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        @include font-color($mainColor);
      }
      .desc-wrap {
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: rem(75);
        position: relative;
        &::after {
          content: '';
          height: 1px;
          background-color: #9bc8ff;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
        }
        li {
          display: flex;
          align-items: center;
          &:last-child {
            justify-content: flex-end;
          }
          img {
            flex: 0 0 auto;
            display: inline-block;
            width: rem(32);
            height: rem(32);
            margin-right: rem(10);
          }
          span {
            max-width: rem(190);
            font-size: rem(22);
          }
        }
      }
    }
  }
}
</style>
